<template>
  <div  style="height: 600px; background-color: #ccc">
    <h3>声明式导航---就是标签的形式</h3>
    <router-link to="/music">访问音乐界面</router-link>
    <router-link :to="path">访问音乐界面-通过变量</router-link>
    <h3>编程式导航---就是在js里面通过函数的方式去跳转</h3>
    <button @click="goToMusic">跳转到音乐界面</button>
    <button @click="goToFriend">跳转到朋友页面</button>
    <h3>编程式导航---传参</h3>
    <button @click="fn">编程式导航---传参-path</button>
    <button @click="fn2">编程式导航---传参-name</button>
  </div>
</template>

<script>
// axios这个包 依赖于这个包，下载了axios自动下载了qs
import qs from 'qs'
export default {
  data() {
    return {
      path: '/friend'
    }
  },
  methods: {
    fn2(){
      this.$router.push({
        name: 'long',
        query: {
          a:1,
          b:2,
          c:3
        }
      })
    },
    // 想使用qs，先下包 npm install qs 或者  yarn add qs
    fn(){
      // qs querystring   .stringify  .parse
      // JSON.stringify()  JSON.parse()
      const query = {
        a: 1,
        b: 2
      }
      console.log(qs.stringify(query));   // 查询参数序列化
      console.log(JSON.stringify(query)); // json字符串
      const str = 'a=1&b=2&c=3&d=4'
      console.log(qs.parse(str));
      this.$router.push(`/music?${qs.stringify(query)}`)
      // this.$router.push({
      //   path: '/music',
      //   query
      // })
    },
    goToMusic() {
      // this.$route 这个对象里面放的是当前路由的信息，比如query params  path地址等等
      // this.$router 这个对象是路由实例，就是我们new VueRouter()的到的那个返回值。它上面有很多方法
      // this.$router.push('/music')
      this.$router.push({
        path: '/music'
      })
    },
    goToFriend(){
      //  this.$router.push('/a/b/c/d/e/f/long')
      this.$router.push({
        name: 'long'
      })
    }
  }
}
</script>